<h2 class="flex-row-space-between">{{projectSvc.resolveNameById(projectId)|async}} / {{'MY_PERMISSION_DASHBOARD'
    |translate}}<button mat-fab color="primary" (click)="openBottomSheet()" *ngIf="extractResult(canDo('CREATE_PERMISSION'))|async">{{'ADD'|translate}}</button></h2>
    <ng-container *ngIf="extractResult(canDo('VIEW_PERMISSION'))|async">
    <div style="width: 230px;">
        <lib-factory [formId]="formId2" [formInfo]="formInfo"></lib-factory>
    </div>

    <ng-container *ngIf="viewType==='LIST_VIEW'">
    
        <app-tenant-search (search)="doSearch($event)" [searchConfigs]="searchConfigs">
        </app-tenant-search>
        <div style="display: flex;flex-direction: row;align-items: center;height: 56px; justify-content: space-between;">
            <section>
                <mat-slide-toggle #batchUpdate class="example-margin" [color]="'accent'" [checked]="'false'"
                    style="margin-right: 16px;" (click)="showOptions()">
                    {{'BATCH_OPERATION'|translate}}
                </mat-slide-toggle>
                <ng-container *ngIf="batchUpdate.checked">
                    <button mat-raised-button color="primary"
                        (click)="doBatchDelete()">{{'BATCH_DELETE'|translate}}</button>
                </ng-container>
            </section>
            <app-table-column-config [formId]="formId" [columns]="getColumnLabelValue()"></app-table-column-config>
        </div>
        <div class="mat-elevation-z8">
            <div class="table-container">
                <table mat-table [dataSource]="dataSource" matSort (matSortChange)="updateTable($event)">
                    <!-- Checkbox Column -->
                    <ng-container matColumnDef="select">
                        <th mat-header-cell *matHeaderCellDef>
                            <mat-checkbox (change)="$event ? masterToggle() : null"
                                [checked]="selection.hasValue() && isAllSelected()"
                                [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
                            </mat-checkbox>
                        </th>
                        <td mat-cell *matCellDef="let row">
                            <mat-checkbox (click)="$event.stopPropagation()"
                                (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"
                                [aria-label]="checkboxLabel(row)">
                            </mat-checkbox>
                        </td>
                    </ng-container>
    
                    <ng-container matColumnDef="id">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnList['id']|translate}} </th>
                        <td mat-cell *matCellDef="let row">
                            <app-copy-field [inputValue]="row.id"></app-copy-field>
                        </td>
                    </ng-container>
    
                    <ng-container matColumnDef="description">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnList['description']|translate}} </th>
                        <td mat-cell *matCellDef="let row">
                            <app-editable-field [inputValue]="row.description"
                                (newValue)="doPatch(row.id,$event,'description')">
                            </app-editable-field>
                        </td>
                    </ng-container>
    
                    <ng-container matColumnDef="name">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnList['name']|translate}} </th>
                        <td mat-cell *matCellDef="let row">
                            <ng-container *ngIf="row.type==='API'||row.type==='PROJECT'">
                                {{row.name}}
                            </ng-container>
                            <ng-container *ngIf="row.type==='COMMON'">
                                <app-editable-field [inputValue]="row.name" (newValue)="doPatch(row.id,$event,'name')">
                                </app-editable-field>
                            </ng-container>
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="type">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnList['type']|translate}} </th>
                        <td mat-cell *matCellDef="let row">
                            {{row.type|translate}}
                        </td>
                    </ng-container>
    
                    <ng-container matColumnDef="edit">
                        <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['edit']|translate}}</th>
                        <td mat-cell *matCellDef="let row" class="table-icon">
                            <mat-icon *ngIf="!row.systemCreate" (click)="openBottomSheet(row.id)" [color]="'primary'">edit</mat-icon>
                            <mat-icon *ngIf="row.systemCreate" aria-disabled [color]="'warn'">block</mat-icon>
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="clone">
                        <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['clone']|translate}}</th>
                        <td mat-cell *matCellDef="let row" class="table-icon" style="padding-right: 14px !important; ">
                            <mat-icon *ngIf="!row.systemCreate" (click)="doClone(row.id)" [color]="'primary'">file_copy</mat-icon>
                            <mat-icon *ngIf="row.systemCreate" aria-disabled [color]="'warn'">block</mat-icon>
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="delete">
                        <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['delete']|translate}}</th>
                        <td mat-cell *matCellDef="let row" class="table-icon">
                            <mat-icon *ngIf="!row.systemCreate" (click)="doDeleteById(row.id)" [color]="'warn'">delete_outline</mat-icon>
                            <mat-icon *ngIf="row.systemCreate" aria-disabled [color]="'warn'">block</mat-icon>
                        </td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="displayedColumns(); sticky: true"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns();"></tr>
                </table>
            </div>
    
            <mat-paginator [showFirstLastButtons]="true" [length]="totoalItemCount" [pageIndex]="entitySvc.pageNumber"
                [pageSize]="pageSize" (page)="pageHandler($event)">
            </mat-paginator>
        </div>
    </ng-container>
    <div *ngIf="viewType==='DYNAMIC_TREE_VIEW'">
        <app-dynamic-tree [loadRoot]="loadRoot" [loadChildren]="loadChildren"></app-dynamic-tree>
    </div>
</ng-container>